<template>
    <div class="main">
      <a-form id="formLogin"
        class="user-layout-login"
        ref="formLogin"
        :form="form"
        @submit="handleSubmit"
      >
        <a-tabs
          :activeKey="customActiveKey"
          :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
          @change="handleTabClick"
        >
          <a-tab-pane key="tab1" tab="登录"><!-- 账号密码-->
            <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;" message="账户或密码错误" />
            <a-form-item style="width:100%">
              <a-input
                size="large"
                type="text"
                placeholder="账户:"
                v-decorator="[
                  'account',
                  {rules: [{ required: true, message: '请输入帐户名或邮箱地址' }], validateTrigger: 'change'}
                ]"
              >
                <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
              </a-input>
            </a-form-item>

            <a-form-item style="width:100%">
              <a-input
                size="large"
                type="password"
                autocomplete="false"
                placeholder="密码:"
                v-decorator="[
                  'passwd',
                  {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
                ]"
              >
                <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
              </a-input>
            </a-form-item>
            <a-form-item style="width:100%;display: flex;margin-bottom: 0;" label="请选择角色：">
              <a-radio-group :options="roleList" v-model="role" class="group"></a-radio-group>
            </a-form-item>
          </a-tab-pane>
        </a-tabs>
        <a-form-item style="margin-top:24px;width:100%;">
          <a-button
            size="large"
            type="primary"
            htmlType="submit"
            class="login-button"
            :loading="state.loginBtn"
            :disabled="state.loginBtn"
            @click="login"
          >确定</a-button>
        </a-form-item>
      </a-form>
    </div>
</template>

<script>
import { login } from '@/api/common'
import { mapMutations } from 'vuex'
export default {
  name: 'login',
  components: {
  },
  data () {
    return {
      customActiveKey: 'tab1',
      loginBtn: false,
      loginType: 0,
      isLoginError: false,
      requiredTwoStepCaptcha: false,
      stepCaptchaVisible: false,
      form: this.$form.createForm(this),
      state: {
        time: 60,
        loginBtn: false,
        loginType: 0,
        smsSendBtn: false
      },
      roleList: [{ label: '超级管理员', value: 'ROLE_ADMIN' }, { label: '管理员', value: 'ROLE_HRBP' }, { label: '会员', value: 'ROLE_VENDER' }],
      role: 'ROLE_ADMIN'
    }
  },
  created () {
  },
  // computed: {
  //   ...mapState({
  //     userInfo: state => state.user.userInfo
  //   })
  // },
  methods: {
    ...mapMutations('common', ['SET_TOKEN']),
    async sendData (params) {
      this.state.loginBtn = true
      let res = await login(params)
      if (res.code === 200) {
        localStorage.setItem('ats_vendor_token', res.authorization)
        this.SET_TOKEN({ token: res.authorization })
        this.$message.success(res.message)
        this.$router.push('/')
      } else {
        this.$message.error(res.message)
      }
      this.state.loginBtn = false
    },
    login () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.sendData(values)
        }
      })
    },
    handleTabClick (key) {
      this.customActiveKey = key
    },
    handleSubmit (e) {
      e.preventDefault()
    },
    getCaptcha (e) {
    }
  }
}
</script>

<style lang="stylus" scoped>
.user-layout-login
  label
    font-size 14px
  .getCaptcha
    display block
    width 100%
    height 40px
  .forge-password
    font-size 14px
  button.login-button
    padding 0 15px
    font-size 16px
    height 40px
    width 100%
  .user-login-other
    text-align left
    margin-top 24px
    line-height 22px
    .item-icon
      font-size 24px
      color rgba(0, 0, 0, 0.2)
      margin-left 16px
      vertical-align middle
      cursor pointer
      transition color 0.3s
      &:hover
        color #1890ff
    .register
      float right
</style>
